<template>
  <div class="news">
    <el-image
      style="width: 100%; height: 250px"
      :src="require('../assets/1.jpg')"
      fit="cover"
    ></el-image>
    <div class="news_card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="title.label"
          :name="title.name + ''"
          v-for="(title, index1) in list"
          :key="index1"
        >
        </el-tab-pane>
      </el-tabs>
      <el-row
        :gutter="20"
        v-for="(item, index) in lists"
        :key="index"
        class="teach_item"
        @click.native="bindteach(item.id)"
      >
        <el-col :span="20">
          <div class="item_center">
            <div class="center_title">{{ item.name }}</div>
            <div class="center_info">{{ item.descr }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="item_right">
            <el-image
              style="width: 100%; height: 170px"
              :src="item.url"
              fit="cover"
            >
            </el-image>
          </div>
        </el-col>
      </el-row>

      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-backtop></el-backtop>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 10,
      pageNo: 1,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      lists: [],
      activeName: 0,
      list: [
        {
          label: "全部",
          name: 0,
        },
        {
          label: "扶贫政策",
          name: 1,
        },
        {
          label: "扶贫信息",
          name: 2,
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    bindteach(event) {
      // console.log(event);
      this.$router.push({
        path: "/newsdetails",
        query: {
          id: event,
        },
      });
    },
    handleClick(tab, event) {
      this.pageNo = 1;
      this.getData();
    },
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getData();
    },
    getData() {
      this.$http
        .postRequest("main/article/show/list", {
          type: this.activeName,
          pNum: this.pageNo,
          pSize: 10,
        })
        .then((res) => {
          console.log(res.data);
          if (res.code === 0) {
            this.lists = res.data;
            this.total = res.totalSize;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.news {
  padding-bottom: 30px;
}

.news_card {
  width: 80%;
  margin: auto;
}

.teach_item:hover {
  border: 1px solid #425994;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.teach_item:hover .arrow {
  background: #425994;
  color: #ffffff;
}

.teach_item {
  margin-top: 13px;
  padding-left: 20px;
  padding-top: 23px;
  padding-bottom: 26px;
  border: 1px solid #eeeeee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.center_title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.center_info {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #535353;
  margin-top: 21px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.item_right {
  text-align: center;
  position: relative;
}
</style>
